﻿@page "/layouts"

<h3>Layout 布局</h3>

<h4>用于布局的容器组件，方便快速搭建页面的基本结构：</h4>

<p>
    <code>Container</code>：外层容器。当子元素中包含 <code>Header</code> 或 <code>Footer</code> 时，全部子元素会垂直上下排列，否则会水平左右排列。<br />
    <code>Header</code>：顶栏容器<br />
    <code>Side</code>：侧边栏容器<br />
    <code>Main</code>：主要区域容器<br />
    <code>Footer</code>：底栏容器
</p>

<h4>组件概述</h4>
<p>
    <code>Layout</code>：布局容器，其下可嵌套 <code>Header</code> <code>Sider</code> <code>Main</code> <code>Footer</code> 或 <code>Layout</code> 本身，可以放在任何父容器中<br />
    <code>Header</code>：顶部布局，自带默认样式，其下可嵌套任何元素<br />
    <code>Sider</code>：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素<br />
    <code>Main</code>：内容部分，自带默认样式，其下可嵌套任何元素<br />
    <code>Footer</code>：底部布局，自带默认样式，其下可嵌套任何元素
</p>

<Tips>
    <p>
        以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<code>Layout</code> 的子元素只能是后四者，后四者的父元素也只能是 <code>Layout</code>
    </p>

    <b>注意事项</b>

    <p>为了方便大家利用这套组件快速搭建项目，作者制作了 <b>项目模板（<code>Project Templates</code>）</b>，使用 <code>dotnet new</code> 命令行，与 <code>Bootstrap Blazor App Extension 扩展插件</code> 通过 <code>Visual Studio 2019</code> 新建项目创建，具体使用方法与步骤请点击 <a href="template" target="_blank">传送门</a></p>
</Tips>

<h4>常见页面布局</h4>

<Block Title="上中下布局" Introduction="常见于互联网网站布局">
    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="中部左右结构布局" Introduction="中部采用左右结构，多用于后台管理网站布局，当布局模板中增加 <code>Side</code> 组件时默认采用上中下，中部采用左右结构布局">
    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="左右结构" Introduction="右侧采用上中下结构，多用于后台管理网站布局，通过设置 <code>IsFullSide</code> 属性值来控制布局为左右结构">
    <Layout ShowFooter="true" IsFullSide="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="自定义侧边栏宽度支持百分比" Introduction="通过设置 <code>SideWidth</code> 属性控制侧边栏宽度，支持百分比写法，设置 <code>0</code> 时关闭设置宽度功能，采用内部子控件撑满宽度特性">
    <Layout ShowFooter="true" SideWidth="200">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</Block>

<Block Title="实战应用" Introduction="">
    <div>实际使用过程中，侧边栏一般有两种用法</div>
    <ul class="mt-2">
        <li>
            <div>侧边栏充满整个屏幕，当菜单总体高度超出屏幕后出现滚动条</div>
        </li>
        <li>
            <div>侧边栏不做处理高度由内容自动撑开</div>
        </li>
    </ul>
    <div>由于存在多种运用方式，所以本组件未进行封装，由自己决定如何进行布局，下面是实际运用中的实战示例</div>
    <p>
        为了方便大家学习与比较以下实战示例中尽量使用 <code>style</code> 内联样式
    </p>
    <p>
        本例点击左侧菜单展开后出现滚动条
    </p>
    <Tips>
        右侧面板中可用区域默认为全部，适用于带 <code>Tab</code> 组件的布局，本例中为了美观 <code>Main</code> 模板中内置了一个 <code>div</code> 并且设置样式为 <code>style="padding: 1rem;"</code>
    </Tips>
    <div style="width: 100%; height: 300px; border: 1px solid rgba(0,0,0,.125);">
        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
            <Side>
                <div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; overflow: auto; border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                    <Menu Items="@GetIconSideMenuItems()" IsVertical="true"></Menu>
                </div>
            </Side>
            <Main>
                <div style="padding: 1rem;">Main</div>
            </Main>
            <Footer>
                <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
            </Footer>
        </Layout>
    </div>
    <p class="mt-3">
        本例点击左侧菜单展开后不出现滚动条会撑开父容器高度
    </p>
    <div style="width: 100%; border: 1px solid rgba(0,0,0,.125);">
        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
            <Side>
                <div style="border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                    <Menu Items="@GetIconSideMenuItems()" IsVertical="true"></Menu>
                </div>
            </Side>
            <Main>
                <div style="padding: 1rem;">Main</div>
            </Main>
            <Footer>
                <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
            </Footer>
        </Layout>
    </div>
    <p class="mt-3">
        <code>Layout</code> 组件与 <code>Tab</code> 组件配合使用实战示例请参阅 <a href="/tabs">Tab 组件</a>
    </p>
</Block>

<Block Title="整页面级别的组件" Introduction="">
    <Tips>通过设置 <code>IsPage</code> 属性设置 <code>Layout</code> 组件是否掌控正页面级别的布局方式，设置为 <code>true</code> 后，本组件采用整屏布局</Tips>

    <ul class="page-layout-demo-list">
        <li><a href="layout-page" target="_blank">整页面组件生成器</a></li>
    </ul>
</Block>

<AttributeTable Items="@GetAttributes()" />
